// 注意，这里引入的vue是运行时的模块，因为content是插入到目标页面，对组件的渲染需要运行时的vue， 而不是编译环境的vue （我也不知道我在说啥，反正大概意思就是这样）
import Vue from 'vue/dist/vue.esm.js';
import ElementUI, { Message } from 'element-ui';
Vue.use(ElementUI);
import Axios from 'axios';

// 注意，必须设置了run_at=document_start此段代码才会生效
document.addEventListener('DOMContentLoaded', function() {
  console.log('vue-chrome扩展已载入');

  insertFloat();
});

// 在target页面中新建一个带有id的dom元素，将vue对象挂载到这个dom上。
function insertFloat() {
  let element = document.createElement('div');
  let attr = document.createAttribute('id');
  attr.value = 'appPlugin';
  element.setAttributeNode(attr);
  document.getElementsByTagName('body')[0].appendChild(element);

  let link = document.createElement('link');
  let linkAttr = document.createAttribute('rel');
  linkAttr.value = 'stylesheet';
  let linkHref = document.createAttribute('href');
  linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
  link.setAttributeNode(linkAttr);
  link.setAttributeNode(linkHref);
  document.getElementsByTagName('head')[0].appendChild(link);

  let left = 0;
  let top = 0;
  let mx = 0;
  let my = 0;
  let onDrag = false;

  var drag = {
    inserted: function(el) {
      (el.onmousedown = function(e) {
        left = el.offsetLeft;
        top = el.offsetTop;
        mx = e.clientX;
        my = e.clientY;
        if (my - top > 40) return;

        onDrag = true;
      }),
        (window.onmousemove = function(e) {
          if (onDrag) {
            let nx = e.clientX - mx + left;
            let ny = e.clientY - my + top;
            let width = el.clientWidth;
            let height = el.clientHeight;
            let bodyWidth = window.document.body.clientWidth;
            let bodyHeight = window.document.body.clientHeight;

            if (nx < 0) nx = 0;
            if (ny < 0) ny = 0;

            if (ny > bodyHeight - height && bodyHeight - height > 0) {
              ny = bodyHeight - height;
            }

            if (nx > bodyWidth - width) {
              nx = bodyWidth - width;
            }

            el.style.left = nx + 'px';
            el.style.top = ny + 'px';
          }
        }),
        (el.onmouseup = function(e) {
          if (onDrag) {
            onDrag = false;
          }
        });
    }
  };

  window.kz_vm = new Vue({
    el: '#appPlugin',
    directives: {
      drag: drag
    },
    template: `
      <div class="wrap flex jcsb aic" ref="float" v-drag>
        <div class="flex aic">
          <img style="width: 40px;margin-right:10px;" src="/icons/48.png" />
          <span>ozon没小白</span>
        </div>
        <el-button type="primary" round size="small" style="margin-left: 20px;" @click="collect">采集</el-button>
      </div>
      `,
    data: function() {
      return {
        show: true,
        list: [],
        user: {
          username: '',
          follow: 0,
          title: '',
          view: 0
        }
      };
    },
    mounted() {},
    methods: {
      collect() {
        // 标题
        const title = document.querySelector('.m4l').textContent;
        // 定价
        // const amount = document.querySelector('.l7l span').textContent;
        // 商品图片
        const imgDom = document.querySelectorAll('.kp1 img');
        const imgArr = [];
        imgDom.forEach(item => {
          imgArr.push(item.src.replace('wc50', 'wc1000'));
        });
        // 配套
        const packages = document.querySelector('.ra-a1 p')?.textContent;

        // TODO: 数据比较迟加载出来，可能出现空的情况，得延迟获取
        //其他属性 [{key,vlaue}]
        const attrs = [];
        const attrDls = document.querySelectorAll('.d7 .s9j .jt3');
        attrDls.forEach(dl => {
          const key = dl.querySelector('dt').textContent;
          const value = dl.querySelector('dd').textContent;
          attrs.push({
            key,
            value
          });
        });
        console.log(title, '------title');
        console.log(imgArr, '------imgArr');
        console.log(packages, '------packages');
        console.log(attrs, '------attrs');
        // Axios.post(
        //   'https://htl-8g27ywr75a8f30da-1253452334.ap-shanghai.app.tcloudbase.com/goods/',
        //   {
        //     title,
        //     amount,
        //     imgArr,
        //     packages,
        //     attrs
        //   }
        // );
        chrome.runtime.sendMessage(
          {
            // 里面的值应该可以自定义，用于判断哪个请求之类的
            type: 'axios',
            apiMethod: 'post',
            url:
              'https://htl-8g27ywr75a8f30da-1253452334.ap-shanghai.app.tcloudbase.com/goods/',
            data: {
              title,
              imgArr,
              packages,
              attrs
            } // 需要请求的url
          },
          response => {
            console.log(response);
          }
        );
      },
      toggle() {
        this.show = !this.show;
      },
      sendMessage(data) {
        chrome.runtime.sendMessage(data, function(response) {
          console.log('收到来自后台的回复：' + response);
        });
      }
    }
  });
}
